/*
  学习目标：使用useEffect和axios获取数据，渲染数据
  步骤：
     1. npm i axios
     2. 封装requst.js
     3. 查文档、封装请求的函数
     4. 声明state list
     5. 使用 useEffect 触发请求
*/
import React, { useEffect, useState } from 'react';
import { getChannelsAPI } from './api/channels';

export default function App() {
  const [list, setList] = useState([]);

  const loadDate = async () => {
    const res = await getChannelsAPI();
    // console.log('res -----> ', res);
    setList(res.data.channels);
  };

  // [] 代表页面渲染完成的生命周期
  useEffect(() => {
    loadDate();
  }, []);

  // useEffect有返回内容，代表的是页面卸载时的回调函数
  // 但是 async/await 这种写法，导致直接返回了 Promise
  // ❌❌❌❌千万不要把 useEffect 变成 async
  // useEffect(async () => {
  //   const res = await getChannelsAPI();
  //   // console.log('res -----> ', res);
  //   setList(res.data.channels);
  // }, []);
  return (
    <ul>
      {list.map((item) => {
        return <li key={item.id}>{item.name}</li>;
      })}
    </ul>
  );
}
